

<% var pageLevelJS = { %>
<link rel="stylesheet" type="text/css" media="screen"  href="${plugin}/ace/assets/css/dropzone.min.css" />
<style>
    html, body {
      height: 100%;
    }
    #actions {
      margin: 2em 0;
    }
    /* Mimic table appearance */
    div.table {
      display: table;
    }
    div.table .file-row {
      display: table-row;
    }
    div.table .file-row > div {
      display: table-cell;
      vertical-align: top;
      border-top: 1px solid #ddd;
      padding: 8px;
      text-align: center;
    }
    div.table .file-row:nth-child(odd) {
      background: #f9f9f9;
    }

    /* The total progress gets shown by event listeners */
    #total-progress {
      opacity: 0;
      transition: opacity 0.3s linear;
    }

    /* Hide the progress bar when finished */
    #previews .file-row.dz-success .progress {
      opacity: 0;
      transition: opacity 0.3s linear;
    }

    /* Hide the delete button initially */
    #previews .file-row .delete {
      display: none;
    }

    /* Hide the start and cancel buttons and show the delete button */

    #previews .file-row.dz-success .start,
    #previews .file-row.dz-success .cancel {
      display: none;
    }
    #previews .file-row.dz-success .delete {
      display: block;
    }
  </style>
</style>
<script src="${plugin}/ace/assets/js/wizard.min.js"></script>
<script src="${plugin}/ace/assets/js/bootbox.js"></script>
<script src="${plugin}/upload/dropzone/dropzone.js"></script>
<script type="text/javascript">
var settings = {
			modelDomainFlag:"str"
		 ,modelName:"库信息"
		 ,modelFlag:"table"
		 ,key:"${sessionId}" 
		}
</script> 
<script type="text/javascript" src="${ctx}/static/js/str/table/import.js"></script>
<%};%> 
<% var layoutParas =
{"title":"","add":isEmpty(data.id),"formId":"applyeditForm","pageLevelJS":pageLevelJS};
layout("/WEB-INF/views/btl/template/backBasicEditFormTemplate.html", layoutParas){ %>
	<div class="widget-box">
			<div class="widget-header widget-header-blue widget-header-flat">
				<h4 class="widget-title lighter">导入表结构</h4>

				<div class="widget-toolbar">
				</div>
			</div>

			<div class="widget-body">
				<div class="widget-main">
					<div id="fuelux-wizard-container">
						<div>
							<ul class="steps">
								<li data-step="1" class="active">
									<span class="step">1</span>
									<span class="title">上传文件</span>
								</li>

								<li data-step="2">
									<span class="step">2</span>
									<span class="title">导入</span>
								</li>

								<li data-step="3">
									<span class="step">3</span>
									<span class="title">结果</span>
								</li>
							</ul>
						</div>

						<hr />

						<div class="step-content pos-rel">
							<div class="step-pane active" data-step="1">
								<h3 class="lighter block green">请上传需要导入的文件</h3>
                                <a title="下载导入表结构模板" href="${ctx}/str/table/download/template?schemaId=${p.id}" target="_blank">下载模板</a>
								<div class="row">
									<div class="col-xs-12">
										<!-- PAGE CONTENT BEGINS -->
										<div class="alert alert-info">
											<i class="ace-icon fa fa-hand-o-right"></i>
											 允许的文件格式为：*.csv
										</div>
		
										<div class="row">
											  <div id="actions" class="row">
											      <div class="col-lg-7">
											        <!-- The fileinput-button span is used to style the file input field as button -->
											        <span class="btn btn-success fileinput-button">
											            <i class="glyphicon glyphicon-plus"></i>
											            <span>选择文件...</span>
											        </span>
											      <!--   <button type="submit" class="btn btn-primary start">
											            <i class="glyphicon glyphicon-upload"></i>
											            <span>Start upload</span>
											        </button>
											        <button type="reset" class="btn btn-warning cancel">
											            <i class="glyphicon glyphicon-ban-circle"></i>
											            <span>Cancel upload</span>
											        </button> -->
											      </div>
											
											      <div class="col-lg-5">
											        <!-- The global file processing state -->
											        <span class="fileupload-process">
											          <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
											            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
											          </div>
											        </span>
											      </div>
											
											    </div>
											    <div class="table table-striped files" id="previews">
											      <div id="template" class="file-row" style="display: none;">
											        <!-- This is used as the file preview template -->
											        <div>
											            <span class="preview"><img data-dz-thumbnail /></span>
											        </div>
											        <div>
											            <p class="name" data-dz-name></p>
											            <strong class="error text-danger" data-dz-errormessage></strong>
											        </div>
											        <div>
											            <p class="size" data-dz-size></p>
											            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
											              <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
											            </div>
											        </div>
											        <div>
											          <button class="btn btn-primary start">
											              <i class="glyphicon glyphicon-upload"></i>
											              <span>开始上传</span>
											          </button>
											          <button data-dz-cancel class="btn btn-warning cancel">
											              <i class="glyphicon glyphicon-ban-circle"></i>
											              <span>取消</span>
											          </button>
											          <button data-dz-remove class="btn btn-danger delete">
											            <i class="glyphicon glyphicon-trash"></i>
											            <span>删除</span>
											          </button>
											        </div>
											      </div>
											
											    </div>
										</div><!-- PAGE CONTENT ENDS -->
									</div><!-- /.col -->
								</div><!-- /.row -->
							</div>

							<div class="step-pane" data-step="2">
								<div class="center">
									<div class="col-md-12 center">
									   <input type="hidden" id="schemaId" value="${p.id}" />
					                   <div class="btn-group-lg toolbar">
										  <button type="button" class="btn btn-primary btn-lg importBtn">
										  	 <i class="ace-icon fa bigger-120"></i>导入
										   </button> 
									   </div>
					               </div>
								</div>
							</div>

							<div class="step-pane" data-step="3">
								<div class="center">
									<h3 class="green">结果：</h3>
									<div id="result"></div>
								</div>
							</div>
						</div>
					</div>

					<hr />
					<div class="wizard-actions">
						<button class="btn btn-prev">
							<i class="ace-icon fa fa-arrow-left"></i>
							上一步
						</button>

						<button class="btn btn-success btn-next" data-last="Finish">
							下一步
							<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
						</button>
					</div>
				</div><!-- /.widget-main -->
			</div><!-- /.widget-body -->
		</div>
<%} %>
